<template>
    <div>
        <div class="m-setting-fix">
            <div class="item">
                <div class="item-child" @click="operator(1)">
                    <el-icon size="30" color="#3698fd" style="margin-bottom: 8px"><brush /></el-icon>
                    主题配置
                </div>
            </div>
        </div>
        <el-drawer v-model="drawer" title="主题配置" size="300px">
            <div class="drawer-item">
                <label>布局</label>
                <el-select v-model="layout"  placeholder="请选择" style="width: 150px" @change="(val)=>changeSwitch(val,2)">
                    <el-option label="纵向" value="vertical"></el-option>
                    <el-option label="横向" value="horizontal"></el-option>
                </el-select>
            </div>
            <div class="drawer-item">
                <label>标签</label>
                <el-switch v-model="tag" @change="(val)=>changeSwitch(val,1)"/>
            </div>
        </el-drawer>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { useStore } from 'vuex'
const drawer = ref(false)
const tag = ref(false)
const layout = ref('vertical')

const store = useStore()
const operator = (type) => {
  switch (type) {
    case 1:
      drawer.value = true
  }
}

const changeSwitch = (val, type) => {
  switch (type) {
    // 是否显示tag
    case 1:
      store.dispatch('setting/setTag', val)
      return
    case 2:
      store.dispatch('setting/setMode', val)
  }
}

</script>

<style lang="scss" scoped>
.m-setting-fix{
    position: fixed;
        top: 50%;
        right: 0;
        z-index: 1997;
        padding: 10px 0 0 0;
        margin: 0;
        text-align: center;
        cursor: pointer;
        background: #fff;
        border: 1px solid #dcdfe6;
        border-top-left-radius: 5.5px;
        border-bottom-left-radius: 5.5px;
        box-shadow: 0 0 50px 0 rgb(82 63 105 / 15%);
        transform: translateY(-50%);
        .item{
            display: flex;
            flex-direction: column;
            align-items: center;

            justify-content: center;
            padding: 0 8px 10px 10px;
            margin: 0;
            list-style: none;
        }
    .item-child{
        color: #3698fd;
        width: 50px;
        height: 50px;
        /*padding-top: 10px;*/
        text-align: center;
        display: flex;
        flex-direction: column;
        background: #f6f8f9;
        align-items: center;
        justify-content: center;
        border-radius: 5.5px;
        font-size: 12px;
        background: #ebf5ff;
        transition: color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;

    }
    .item-child2{
        margin-top: 10px;
        color: #b37feb;
        background: #f7f2fd;
        transition: color .15s ease,background-color .15s ease,border-color .15s ease,box-shadow .15s ease;
    }

}
.drawer-item{
    width: 100%;
    display: flex;
    margin-bottom: 15px;
    align-items: center;
    justify-content: space-between;
}
</style>
